<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的商品</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<script src="../js/mui.min.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			.content-area img{
				width: 80px;
				height: 80px;
				margin-right:10px;
			}
			.content-area li{
				height:90px;
				padding: 8px;
			}
			.title{
				height:42px;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box; /* 将对象作为弹性伸缩盒子模型显示。 */
				-webkit-box-orient:vertical;/* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
				-webkit-line-clamp:2; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。 */
			}
			.issueType{
				position: relative;
				bottom: -10px;
				color:#09a267;
			}
		</style>
	</head>
	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: linear-gradient(#9191ea,#fff);">
			<span id="back" class="mui-icon mui-icon-back"></span>
			<h1 class="mui-title">我的商品</h1>
		</div>
		<div class="mui-content" style="padding-left:10px;padding-right:10px;"/>
			<div class="content-area">
				<div class="mui-card">
					<ul class="mui-table-view" id="product_list">
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../jquery.mobile-1.4.5/jquery-1.8.3.min.js"></script>
	<script src="../js/ajax.js"></script>
	<script src="../js/conf.js"></script>
	<script src="../js/person-product.js"></script>
	<script>
		$(function(){
			mui.init({
				preloadPages:[{
					id:'product_detail',
					url:'html/product_detail.html'
				}]
			});
			mui.plusReady(function() {
				var pdetailPage = null;
				mui('#product_list').on('tap',".product_li",function(e) {
					var id = this.getAttribute('id');
					if(!pdetailPage){
						pdetailPage = plus.webview.getWebviewById('product_detail');
					}
					//触发商品详情页面的pdetailId事件
					mui.fire(pdetailPage,'pdetailId',{
						id:id
					});
					mui.openWindow({
						id:"product_detail"
					});
				});
			});
			// $(".mui-content").height($(window).height());
			$("#back").click(function(){
				mui.back();//返回上一级页面
			});
		});
	</script>
</html>
